<template>
  <!-- <div class="flex-1 overflow-hidden"> -->
  <el-button @click="updateMusicList">选择音乐文件夹</el-button>
  <div class="song-list-container">
    <div class="title-container" style="">
      <div style="position: relative; width: 45px">#</div>
      <div style="width: 45%">标题</div>
      <div style="width: 35%">专辑</div>
      <div style="width: 45px">操作</div>
      <div style="width: 10%">时长</div>
    </div>
    <div class="list-container" style="">
      <div
        class="list"
        v-for="(item, index) in musicListStore.musicList"
        v-if="musicListStore.musicList.length"
        :key="index"
        @click="playMusic(item)"
      >
        <div class="font-bold !text-[var(--content-text-sub-color)] relative w-[45px]">
          {{ index < 9 ? '0' + (index + 1) : index + 1 }}
        </div>
        <div class="item title" style="width: 45%">
          <div class="flex flex-row items-center">
            <div class="w-[40px] h-[40px] mr-[10px] rounded-[8px] overflow-hidden">
              <img :src="item.pathCover" class="w-full h-full object-cover" />
            </div>
            <div class="name-box">
              <div style="">{{ item.title }}</div>

              <div class="text-[12px] !text-[var(--content-text-sub-color)]">
                <span class="name">{{ item.artist }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="!text-[var(--content-text-sub-color)]" style="width: 35%">
          {{ item.album }}
        </div>
        <div class="!text-[var(--content-text-sub-color)]" style="width: 45px">
          <i class="iconfont icon-xihuan"></i>
        </div>
        <div class="!text-[var(--content-text-sub-color)]" style="width: 10%">
          {{ formattingTime(item.duration) }}
        </div>
      </div>
      <div class="!text-[var(--content-text-sub-color)]" v-else>
        <div class="item" style="position: relative; width: 45px">暂无</div>
      </div>
    </div>
    <div class="loading" style="display: none"></div>
  </div>
  <!-- </div> -->
</template>
<script setup lang="ts">
import { formattingTime } from '@renderer/utils'
import { ref, onMounted, computed, toRefs } from 'vue'
import { useMusicListStore } from '@renderer/store/music/musicList'
import { useMusicStore } from '@renderer/store/music'
const currentPlaySong = useMusicStore()
const musicListStore = useMusicListStore()

// const musicListComputed = computed(() => musicList)

async function updateMusicList() {
  const songs = await window.electron.selectMusicFolder()
  musicListStore.setMusicList(songs)
}
onMounted(async () => {
  const songs = await window.electron.getMusicListCache()
  if (songs) {
    musicListStore.setMusicList(songs)
  }
})
async function playMusic(item) {
  console.log('当前播放的本地歌曲', item)
  // 调用 Electron 主进程获取音乐元信息，并设置当前播放音乐
  // const musicName = `${item.title} - ${item.artist}.mp3`
  const res = await window.electron.searchMusic(item.id)
  console.log('获取到的音乐元信息:', res)
  currentPlaySong.setCurrentPlaySong(res)
}
</script>

<style scoped lang="scss">
.song-list-container {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 0;
  font-weight: 600;
  padding: 10px;
  overflow: auto;
  .title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    color: var(--content-text-sub-color);
    // border-bottom: 1px solid #444;
  }
  .list-container {
    flex: 1;
    padding: 10px;
    overflow: auto;
    .list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      cursor: pointer;
      // border-bottom: 1px solid #444;
      &:hover {
        background-color: rgba(255, 255, 255, 0.06) !important;
        border-radius: 10px;
        // width: 120%;
      }
    }
  }
}
</style>
